<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>标签</title>
	<style type="text/css">
		.father{
			width: 200px;
			height: 200px;
			background: red url() 0 0 no-repeat;
		}

	</style>
	<script type="text/javascript">
		//页面加载后再执行
		window.onload = function  () {
			//通过id捉取到father	
			father =  document.getElementById('father');
			//通过id捉取到son
			son =  document.getElementById('son');

			// son.innerHTML="<h1>学并思</h1>";
			// 
			// father.textContent="这个盒子里面的东西";
			// 
			// alert(son.innerText);
			// 
			// father.textContent="这个盒子里面的东西";
			// 
			logo = document.getElementById('logo');


			son.style.color="blue";

			// logo.src="https://www.sogou.com/index/images/logo_440x140.v.1.png";
			//获取属性
			// alert(logo.getAttribute('xbs'));
			// 设置属性
			// logo.setAttribute("data-id", "234234");
			// 
			// 200
			
			// width = (parseInt(father.style.width));

			// father.style.width=(width+50)+"px";
			//兼容性的获取外部样式 
			width =  window.getComputedStyle ? window.getComputedStyle(father,null).width : father.currentStyle.width;

			// alert(width);
			// 
			// 
			username =  document.getElementById('username');

			username.onblur = function  () {
				alert(username.value)
			}


		}
	</script>
</head>
<body>
	<div class="father" id="father">
		<p id="son">学并思</p>
		<img id="logo" src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" width="200" alt="学并思" xbs="学并思id" >

		<input type="text" id="username" >
	</div>
</body>
</html>